<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" leftUrl="/pages/find/index" :noLeft="false" :showTitle="serviceClassName"
			showBackground="white"></myheader>
		<!-- #endif -->
		<view class="content">
			<view v-for="(serviceItem, index) in dataList" @click="goServiceDetail(serviceItem)" :key="index" class="card-item" style="margin-top: 15px;overflow: hidden;">
				<view style="width: 120px;height: 120px;background-color: #EAECEF;">
					<image :src="serviceItem.mainPic" v-if="serviceItem.mainPic!=null"
						style="width: 120px;height: 120px" />
				</view>
				<view style="flex-grow: 1;padding-left: 10px;align-self: flex-start;">
					<view
						style="max-width:180px;width: 180px;color: #34495E;font-size: 16px;margin-top: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
						{{serviceItem.name}}
					</view>
					<view
						style="margin-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width:180px;width: 180px;">
						<view
							style="margin-right: 4rpx;padding: 4rpx 6rpx 4rpx 6rpx;border:1px solid #EAECEF;border-radius: 14rpx;display: inline-block;font-weight: 400;color:#8292A2;font-size: 12px;"
							v-for="(tag,tagIndex) in serviceItem.tags" :key="tagIndex" v-if="tagIndex<=2">
							{{tag}}
						</view>
					</view>
					<view style="margin-top: 10px;display: flex;justify-content: flex-start;align-items: center;"
						>
						<view style="width: 124px;display: flex;
						align-items: center;">
							<view
								style="display: inline-block;width:32px;height: 32px;border-radius: 16px;background-color: #F4F6F7;overflow: hidden;">
								<image :src="serviceItem.storeLogo" v-if="serviceItem.storeLogo!=null"
									style="width: 32px;height: 32px" />
							</view>
							<view
								style="display: inline-block;margin-left: 5px;width: 85px;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;color:#2e4964">
								{{serviceItem.storeName}}
							</view>
						</view>
						<view style="flex-grow: 1;text-align: right;margin-right: 5px;">
							<view class="service-detail-button" @click.stop="dingyue(serviceItem)"
								v-if="hasServiceIdList.indexOf(serviceItem.id)<0">
								免费订阅
							</view>
							<view class="service-detail-button" style="background-color: #fff;color:#1ABC9C;border: 1px solid #1ABC9C" v-else>
								已订阅
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;
				align-items: center;
				justify-content: center;height: 40px;width:100%; font-size: 24rpx;color:#2E4964">{{ dataLoading == 1 ? '数据准备中,请稍后...': '没有更多数据了' }}</view>
			<view style="width: 10px;height: 120px;"></view>
		</view>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
	import myheader from '../../components/header/index.vue';
	import mytabbar from '../../components/my-tabbar/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				serviceClassId: null,
				serviceClassName: null,
				cursor: "",
				isLast: false,
				dataList: [],
				hasServiceIdList: [],
				datalaoding: 1
			}
		},
		computed: {
			...mapGetters(["nickname"])
		},
		onLoad(e) {
			if (e.serviceClassId != null) {
				this.serviceClassId = Number(e.serviceClassId);
			}
			if (e.serviceClassName != null) {
				this.serviceClassName = e.serviceClassName;
			}
			if (this.serviceClassId == null || this.serviceClassName == null) {
				uni.switchTab({
					url: "/pages/find/index"
				});
			}
			if (this.nickname) {
				this.gethasServiceIdList();
			}
			this.getDataList("init");
		},
		methods: {
			onReachBottom() {
				this.page = this.page + 1
				this.getDataList("nextPage");
			},
			gethasServiceIdList() {
				this.$H.post("portal/sub/searchIds").then((res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.hasServiceIdList = res.data;
						this.$forceUpdate();
					}
				}));
			},
			getDataList(type) {
				if (this.isLast == true) {
					return
				}
				uni.showLoading({
					title: '正在获取数据',
					mask: true
				});
				let postData = {
					"serviceClassId": this.serviceClassId,
					"pageSize": 10,
					"cursor": this.cursor,
				}
				this.$H.postToB('portal/more', postData).then((res) => {
					if (res.code == 0) {
						uni.hideLoading();
						if (res.data.data.length == 0 && res.data.isLast == true) {
							this.dataLoading = 2
						}
						if (res.data.data.length > 0) {
							this.dataList = this.dataList.concat(res.data.data);
						}
						this.cursor = res.data.cursor;
						this.isLast = res.data.isLast;
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			},
			goServiceDetail(item) {
				uni.navigateTo({
					url: "/pages/service/serviceDetail?serviceId=" + item.id
				});
			},
			dingyue(service) {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {

					let postData = {
						"serviceId": service.id,
					}
					uni.showLoading({
						title: '正在订阅...',
						mask: true
					});
					this.$H.post("portal/sub/sub?serviceId=" + service.id, postData).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: "订阅成功",
								icon: "none"
							})
							this.gethasServiceIdList();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					});
				}
			}
		}
	}
</script>
<style>
	body {
		background-color: #F4F6F7;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.card-item {
		height: 120px;
		margin-top: 10px;
		background-color: white;
		border-radius: 16px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.service-detail-button {
		display: inline;
		font-size: 14px;
		margin-left: 10px;
		background-color: #1ABC9C;
		color: white;
		font-weight: 700;
		border-radius: 16px;
		padding: 5px 5px 5px 5px;
	}
</style>